import { useState } from "react";
import "./index.css";
//受控组件
const App = function () {
  const [formData, setForm] = useState({
    name: "",
    isOver: false,
    sex: 1,
    type: "",
    text: "",
  });
  const setState = ({ target }) => {
    const { name, value, checked } = target;
    let val = value;
    if (name === "isOver") {
      val = checked;
    }
    //比如内容过滤
    if(typeof val === 'string') {
        val =  
        value.replace('a','***')
    }
    setForm({ ...formData, [name]: val });
  };
  const { name, isOver, sex, type, text } = formData;
  return (
    <div>
      <form>
        <label>
          <span>用户</span>
          <input name="name" type="text" value={name} onChange={setState} />
        </label>
        <label>
          <span>是否毕业</span>
          <input
            type="checkbox"
            onChange={setState}
            name="isOver"
            checked={isOver}
          />
        </label>
        <label>
          <span>男</span>
          <input
            type="radio"
            onChange={setState}
            name="sex"
            value="1"
            checked={sex === "1"}
          />
        </label>
        <label>
          <span>女</span>
          <input
            type="radio"
            onChange={setState}
            name="sex"
            value="2"
            checked={sex === "2"}
          />
        </label>
        <label>
          <span>专业类型</span>
          <select>
            <option onChange={setState} name="type" value={type}>
              1
            </option>
            <option onChange={setState} name="type" value={type}>
              2
            </option>
          </select>
        </label>
        <label>
          <span>自我评价</span>
          <textarea onChange={setState} name="text" value={text}></textarea>
        </label>
        <button type="button">提交</button>
      </form>
    </div>
  );
};

export default App;
